<template>
  <view class="add_bank_card">
    <HeadNav page-name="添加银行卡" :borderType="true" :showNav="true" />
          <div class="cozy_box"><img class="img_box" src="https://qqposs.oss-cn-shenzhen.aliyuncs.com/mpAppImg/icon/tips1_icon.png" alt="">请仔细填写银行卡信息，填写错误可能导致提现失败</div>
    <view class="bank_card">
      <!-- 姓名 -->
      <view class="bank_card_message">
        <span>姓名:</span>
        <input v-model="bankCardName" maxlength="20" placeholder-style="color: rgba(0,0,0,0.30);" placeholder="请输入真实姓名" />
      </view>
      <!-- 身份证 -->
      <view class="bank_card_message">
        <span>身份证: </span>
        <input v-model="bankCardID" maxlength="50" type="number" placeholder-style="color: rgba(0,0,0,0.30);" placeholder="请输入身份证号" />
      </view>
      <!-- 卡号 -->
      <view class="bank_card_message">
        <span>银行卡号: </span>
        <input v-model="bankCardNumber" @blur="bankCardBlurFn" maxlength="50" type="number" placeholder-style="color: rgba(0,0,0,0.30);" placeholder="请输入银行卡号" />
      </view>
      <!-- 发卡行 -->
      <view class="bank_card_message">
        <span>发卡行: </span>
        <input v-model="bankCardissuers" maxlength="20" type="number" placeholder-style="color: rgba(0,0,0,0.30);" placeholder="请先输入银行卡号" />
        <!-- <text class="bank_card_issuers" style="color: rgba(0,0,0,0.30);">请点击选择发卡行</text> -->
        <!-- <image @click="pickerShow = true" class="bank_card_image" src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/613c4765630da20011c12125/61404a82a316460011193b1d/16326571654670876908.png" /> -->
      </view>
      <!-- 支行 -->
      <view class="bank_card_message">
        <span>支行: </span>
        <input v-model="bankCardbranch" maxlength="20" placeholder-style="color: rgba(0,0,0,0.30);" placeholder="请输入支行名称" />
      </view>
      <!-- 手机号 -->
      <view class="bank_card_message">
        <span>手机号: </span>
        <input v-model="mobilePhone" maxlength="20" type="number" placeholder-style="color: rgba(0,0,0,0.30);" placeholder="请输入预留手机号" />
      </view>
      <view class="bank_card_message">
        <span></span>
        <input v-model="withdrawalCode" type="number" maxlength="6" placeholder-style="color: rgba(0,0,0,0.30);" placeholder="请输入短信验证码" />
        <button class="count_down_box" :class="{'count_down_box_1':!(sendCode == '重新获取' || sendCode == '获取验证码')}" @click.stop="clickSendCode">{{sendCode}}</button>
      </view>
    </view>
    <!-- 完成 -->
    <div class="bank_card_btn_box" :class="{'bank_card_btn_box_ios':isIOS}">
      <button class="bank_card_btn" hover-class="hover" @click="addBackCardFn">马上添加</button>
    </div>
    <!-- 选择发卡行 -->
    <u-picker v-model="pickerShow" @confirm="bankCardConfirm" mode="selector" :range="rangeList" range-key="value" :default-selector="[0]" confirm-text="确定" :safe-area-inset-bottom="true" confirm-color="#e44435"></u-picker>
  </view>
</template>
<script>
import HeadNav from "@/components/headNav/index.vue";
import Money from '@/api/money.js'
import Util from "@/api/util.js"
export default {
  name: '',
  components: {HeadNav},
  data () {
    return {
      isIOS: uni.getSystemInfoSync().system.indexOf("Android") !== 0,
      bankCardName: '', // 姓名
      bankCardID: '', // 身份证
      bankCardNumber: '', // 卡号
      bankCardissuers: '', // 发卡行
      bankCardbranch: '', // 支行
      mobilePhone: '', // 手机号
      withdrawalCode: '', // 验证码
      indexArr: 0,
      issuersArray: [],
      issuersShow: false,
      // 发卡行
      pickerShow: false,
      // '中国银行', '招商银行', '工商银行', '上海银行', '民生银行', '建设银行', '农业银行', '平安银行'
      rangeList: [],
      sendCode: '获取验证码',
      timer: null, // 计时器
      count: 60,
      disabledType: false,
    }
  },
  methods: {
    addBackCardFn () {
      if (!this.bankCardName) {
        return wx.showToast({
          title: '请输入真实姓名！',
          icon: 'none',
          duration: 1000
        })
      }
      if (!this.bankCardID) {
        return wx.showToast({
          title: '请输入身份证号！',
          icon: 'none',
          duration: 1000
        })
      }
      if (!this.bankCardNumber) {
        return wx.showToast({
          title: '请输入银行卡号！',
          icon: 'none',
          duration: 1000
        })
      }
      if (!this.bankCardissuers) {
        return wx.showToast({
          title: '请输入发卡行！',
          icon: 'none',
          duration: 1000
        })
      }
      if (!this.bankCardbranch) {
        return wx.showToast({
          title: '请输入支行！',
          icon: 'none',
          duration: 1000
        })
      }
      if (!this.mobilePhone) {
        return wx.showToast({
          title: '请输入手机号！',
          icon: 'none',
          duration: 1000
        })
      }
      if (!this.withdrawalCode) {
        return wx.showToast({
          title: '请输入验证码！',
          icon: 'none',
          duration: 1000
        })
      }
      this.disabledType = true
      let params = {
        bankBranch: this.bankCardbranch,
        cardNumber: this.bankCardNumber,
        cardholder: this.bankCardName,
        idCard: this.bankCardID,
        issuer: this.bankCardissuers,
        reserveMobile: this.mobilePhone,
        code: this.withdrawalCode,
      }
      Money.addBankCard(params).then(res => {
        if (res.code == 200) {
          wx.showToast({
            title: '添加成功！',
            icon: 'none',
            mask: true,
            duration: 1000
          })
          this.disabledType = false
          setTimeout(()=>{
            wx.navigateBack({
              delta: 1
            })
          },1000)
        }
      })
    },
    bankCardBlurFn (e) {
      console.log(e)
      if (!e.detail.value) return
      if (!this.mobilePhone) {
        wx.showToast({
          title: '请输入手机号！',
          icon: 'none',
          duration: 1000
        })
      }
      if (Util.bankAccountValid(e.detail.value) == 200) {
        Money.getBankName({cardNumber: e.detail.value}).then(res => {
          if (res.code == 200) {
            this.bankCardissuers = res.data.split('·')[0]
          } else {
            this.bankCardissuers = ''
          }
        })
      } else {
        wx.showToast({
          title: Util.bankAccountValid(e.detail.value),
          icon: 'none',
          duration: 1500
        })
      }
    },
    // 确定-选择发卡行
    bankCardConfirm (e) {
      console.log(this.rangeList[e].value, '点击了确定按钮-----0');
    },
    // 发送验证码
    clickSendCode () {
      if (!(this.sendCode == '重新获取' || this.sendCode == '获取验证码')) return
      Money.withdrawalCode({}).then(res => {
        if (res.code == 200) {
          this.sendCode = `(${this.count}s)后重新获取`
          if (!this.timer) {
            this.timer = setInterval(() => {
              if (this.count == 1) {
                this.sendCode = '重新获取'
                clearInterval(this.timer)
                this.timer = null
                this.count = 60
              } else {
                this.count--
                this.sendCode = `(${this.count}s)后重新获取`
              }
            }, 1000)
          }
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.add_bank_card {
  height: 100vh;
  background: #f2f3f5;
  .bank_card {
    background: #fff;
  }
}
.bank_card_message {
  display: flex;
  align-items: center;
  height: 96rpx;
  border-bottom: 2rpx solid #eee;
  font-size: 32rpx;
  padding: 24rpx 32rpx;
  line-height: 48rpx;
  span {
    width: 160rpx;
  }
  input {
    margin-top: 6rpx;
    flex: 1;
  }
  .count_down_box {
    padding: 0;
    margin: 0;
    font-size: 28rpx;
    color: #E44435;
    background: none;
    line-height: 40rpx;
    &.count_down_box_1 {
      color: #C8C9CC;
    }
  }
  .bank_card_issuers {
    margin-top: 0;
  }
  .bank_card_image {
    width: 16rpx;
    height: 28rpx;
    margin-top: 11rpx;
  }
}
.bank_card_btn_box {
  width: 100%;
  position: fixed;
  left: 0;
  bottom: 0;
  padding: 0 32rpx;
  &.bank_card_btn_box_ios {
    bottom: 40rpx;
  }
}
.bank_card_btn {
  width: 100%;
  height: 88rpx;
  opacity: 1;
  background: #e44435;
  border-radius: 44rpx;
  box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(228,68,53,0.50);
  color: #fff;
}
.cozy_box {
  padding: 6rpx 32rpx;
  background: #fffbe8;
  font-size: 20rpx;
  color: #FAAB0C;
  display: flex;
  align-items: center;
  .img_box {
    width: 32rpx;
    height: 32rpx;
    margin-right: 8rpx;
  }
}
</style>
